<template>
    <div class="mainViewBig" v-bind:style="style">
        <div class="_content">
            <div class="_bt1">
                <h1 class="_bt1_txt" ref="bt1Txt">{{ title1.content }}</h1>
            </div>
            <div class="_bt1">
                <h1 class="_bt1_txt" ref="bt2Txt">{{ title2.content }}</h1>
            </div>
        </div>
        <div class="_dw">
            <p class="_tips">{{ unit1.content }}</p>
            <p class="_tips">{{ unit2.content }}</p>
            <p class="_tips">{{ displayDate.content }}</p>
            <div class="_bottom">
                <p>{{ baseMark.content }}</p>
            </div>
        </div>
    </div>
</template>

<script>
// import "./bigScreen.scss";
import './flexible'
import resize from "./resize";
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
    name: "bigScreen",
    data() {
        return {
			style: {
				background:''
			}, //缩放样式
			themeInfo: { 
                // topicName1: '年政务公开工作频联席会议啊',
                // topicName2: '一二三四一二三四年政务公开工作联席会议',
                // unitName1: '砀山县经信局/财政局/自然规划局',
                // unitName2: '梨都投资集团',
                // topicDate: '2023年5月26日',
                // markName: '数字砀山 · 数字经信',
                // bgImages: [{
                //     fileCheck: '',
                //     fileName: '',
                //     fileBlob: ''
                // }],
            },

			//地址
			address: {
				id: "",
				content: "",
				titletype:"displayUrl"
			},

			//标题1
			title1: {
				id: "",
				content: "",
				titletype:"title1"
			},

			//标题2
			title2: {
				id: "",
				content: "",
				titletype:"title2"
			},

			//单位1
			unit1: {
				id: "",
				content: "",
				titletype:"unit1"
			},

			//单位2
			unit2:{
				id: "",
				content: "",
				titletype:"unit2"
			},

			//日期
			displayDate:{
				id: "",
				content: "",
				titletype:"displayDate"
			},

			//底标
			baseMark: {
				id: "",
				content: "",
				titletype:"baseMark"
			},

			backGroundImg: {}

        };
    },
    methods: {
		pageShow() {
			//页面初始宽高显示 和 页面大小改变监听
			this.style = resize.setScale();
			window.onresize = () => {
				this.style = resize.setScale();
				this.style.background = 'url('+this.backGroundImg.fileUrl+')';
			};
		},
        setFontSize(){
            //标题1缩放
            let erd = elementResizeDetectorMaker()
            let bt1Txt = this.$refs.bt1Txt                
            let scaleX1 = 1;
            erd.listenTo(bt1Txt, (element) => {
                if (element.clientWidth > 1720) {
                    scaleX1= 1720/element.clientWidth
                }else {
                    scaleX1 = 1
                }
                bt1Txt.style.transform  = 'scaleX('  + scaleX1 + ')';
            })
            
            //标题2缩放
            let bt2Txt = this.$refs.bt2Txt                         
            let scaleX2 = 1;   
            erd.listenTo(bt2Txt, (element) => {
                if (element.clientWidth > 1720) {
                    scaleX2= 1720/element.clientWidth
                }else {
                    scaleX2 = 1
                }
                bt2Txt.style.transform  = 'scaleX(' + scaleX2 +')';
            })
        },

		getReleaseInfoList() {
			let self = this;

			let address = self.address.titletype;
			// let editPerson = "";
			let topicName1 = self.title1.titletype;
			let topicName2 = self.title2.titletype;
			let unitName1 = self.unit1.titletype;
			let unitName2 = self.unit2.titletype;
			let topicDate = self.displayDate.titletype;
			let markName = self.baseMark.titletype;
			//
			// let params = {displayUrl:address,title1:topicName1,title2:topicName2,unit1:unitName1,unit2:unitName2,displayDate:topicDate,baseMark:markName};

			self.$http({
				url: "/jinl/mg/welcome/getWelcomeRelease",
				method: "post",
				data: JSON.stringify(),
				dataType: 'json',
				contentType: "application/json",
			}).then(resp => {
				if (resp.success){
					for (let data of resp.result) {

						let titleType = data.titleType;
						if (titleType == address){
							self.address.content = data.titleContent;
							self.address.id = data.id;
							self.editPerson = data.userName+"   "+data.updateTimeFt;


						}

						if (titleType == topicName1){
							self.title1.content = data.titleContent;
							self.title1.id = data.id;
						}

						if (titleType == topicName2){
							self.title2.content = data.titleContent;
							self.title2.id = data.id;
						}

						if (titleType == unitName1){
							self.unit1.content = data.titleContent;
							self.unit1.id = data.id;
						}

						if (titleType == unitName2){
							self.unit2.content = data.titleContent;
							self.unit2.id = data.id;
						}

						if (titleType == topicDate){
							self.displayDate.content = data.titleContent;
							self.displayDate.id = data.id;
						}

						if (titleType == markName){
							self.baseMark.content = data.titleContent;
							self.baseMark.id = data.id;
						}
					}
				}
			});
		},
		getList() {
			let self = this;
			// self.themeInfo.bgImages = [];
			self.$http({
				url: "/jinl/mg/welcome/queryWelcomeReleaseImgList",
				method: "post",
				data: JSON.stringify({types:['6']}),
				dataType: 'json',
				contentType: "application/json",
			}).then(resp => {
				if (resp.success){
					for (let data of resp.result){
						let fileType = data.fileType;
						data.fileBlob = data.fileUrl;
						data.fileCheck = parseInt(data.fileCheck);
						data.fileName = data.displayName;
						if (fileType == 6){
							// self.themeInfo.bgImages.push(data);
							if (data.fileCheck == 1){
								self.backGroundImg = data;
								self.style = {background:'url('+self.backGroundImg.fileUrl+')'};

							}
						}
					}

				}
			});
		},






    },
    mounted() {
        let self = this;
		self.getList();
        self.setFontSize();
		self.pageShow();
		self.getReleaseInfoList();

    },
};
</script>

<style lang="scss" scoped>
	@import "@/views/basic-data/big-screen/bigScreen.scss";
</style>
